<template>
    <main>
        <div class="capsule-container" v-for="(card, i) in content" :key="`order-${i}`" :id="`order-${i}`">
            <!-- 商品像素画 -->
            <div class="appearance">
                <div v-for="i in 4" :key="i" class="ul">
                    <div v-for="j in 4" :key="`${i}-${j}`" :id="`M${i}-${j}`" :style="`background-color: ${card['appearance']['colors'][i-1][j-1]};`"></div>
                </div>
            </div>

            <!-- 内容块 -->
            <div class="item-container">
                <div class="item">
                    <img src="../../components/icons/胶囊_L.svg" alt="胶囊图标">
                    <span>产品: <b>{{ card['name'] }}</b></span>
                </div>

                <div class="item">
                    <img src="../../components/icons/价格.svg" alt="价格图标">
                    <span>价格: <b>{{ card['price'] }}</b></span>
                </div>

                <div class="item">
                    <img src="../../components/icons/时间.svg" alt="时间图标">
                    <span>过期: <b>{{ card['expires_at'].split('T')[0] }}</b></span>
                </div>
            </div>

            <!-- 商品描述 -->
            <div class="description">{{ card['description'] }}</div>

            <!-- 删除按钮 -->
            <div class="delete" @click="api.delete(card['id'])">销毁</div>
        </div>
    </main>
</template>

<script setup>
//Fuck API
import { Api } from '@/assets/js/api';
import { onMounted, ref } from 'vue';

//登录验证保护
const api = new Api();
api.check_session()

const content = ref([])  //用于遍历商品数量
onMounted(async () => {
    content.value = await api.get_product();
})
</script>

<style src="./capsule.css" scoped></style>